<link rel="stylesheet" type="text/css" href="css/default-grid.css" />
<link rel="stylesheet" type="text/css" href="css/component-grid.css" />

<?php 
  include("includes/header_no_bg.php");
  include("includes/connection.php");
  include("includes/Mobile_Detect.php");
  $detect = new Mobile_Detect;
  $deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
  $scriptVersion = $detect->getScriptVersion();
?>

<style type="text/css">
  #portall {
    /*margin-top: 50px;*/
  }
  #portall h5 {
    color: #438CCA !important;
    font-weight: bold;
    margin: 10px 0 10px 0;
    padding-bottom: 10px;
  }
  #portall p {
    color: #000 !important;
  }
  .portall-thumb-placer {
    display: table-cell;
    padding: 10px;
  }
  .portall-image-placer {
    width: 100%;
  }
  .portall-image-placer img {
    width: 100%;
  }
  #triangle-topleft {
    border-top: 70px solid #fff;
    border-right: 70px solid #ddd;
    opacity: 1;
  }
  .portall-detail-placer {
    position: relative;
  }

  #og-grid>li>a>img {
    width: 200px;
  }
  .og-details a {
    padding: 10px;
    margin-right: 5px;
  }
</style>


<section id="portall" data-speed="4" data-type="background">
  <div id="file-port" class="content container">  
    <header>
      <!-- <h1>Our Portfolios <span>These are our works</span></h1>  -->
      <h1>Karya Kami <span>Silahkan Anda menilai hasil karya kami :)</span></h1> 
    </header>
    <div class="main">
      <ul id="og-grid" class="og-grid">
        <?php
          $sql = "SELECT * FROM tb_portfolio ORDER BY id DESC";
          $query = mysql_query($sql);
          while ($port = mysql_fetch_array($query)) {
            $class_link = "hide_link";
            $link = strtolower($port['link']);
            $pos = strpos($link, "www.");
            if ($pos !== false) {
              $class_link = "";
              if (strpos($link, "http://") === false) {
                $link = "http://".$link;
              }
            }
        ?>
            <li>
              <a href="/port-detail.php?id=<?php echo trim(base64_encode($port['id'])); ?>" data-website="<?php echo $link ?>" data-classweb="<?php echo $class_link ?>" data-largesrc="img/portfolio/<?php echo $port["code"] ?>/<?php echo $port['gambar']?>" data-title="<?php echo (strlen(strip_tags($port["judul"])) > 24) ? substr(strip_tags($port["judul"]),0,24)."..." : strip_tags($port["judul"]); ?>" 
                data-description="<?php echo (strlen(strip_tags($port["keterangan"])) > 250) ? substr(strip_tags($port["keterangan"]),0,250)."..." : strip_tags($port["keterangan"]); ?>">
                <img src="img/portfolio/<?php echo $port['code'] ?>/<?php echo $port['gambar']?>" alt="img01"/>
              </a>
            </li>
            <?php
          }
        ?>
        <div class=""></div>
      </ul>
    </div>
  </div>
</section>

<script type="text/javascript">
  $(document).ready(function() {
    $('#file-port').on('click', '.portall-more', function(event) {
      event.preventDefault();
      var id = $(this).closest(".portall-thumb-placer").find('.id-port').val();
      window.open("port-detail.php?id="+id);
    });
  });
</script>

<?php include("includes/footer_no_bg.php"); ?>

